<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类</title>
	</head>
	<body>
		<button>点击</button>
		<script>
			// 在ES6中,类没有变量提升,必须先定义类,才能通过实例对象
			// 类的属性和方法,一定要加this使用
			// 创建类		
			var that1;
			var that2;
			class Star {
				constructor(name, age) {
					// constructor里面的this指向的是创建的实例对象
					that1 = this;
					this.name = name;
					this.age = age;
					// this.sing('第二首歌');
					this.btn = document.querySelector('button');
					this.btn.onclick = this.sing;
				}
				// 在类中添加方法				
				sing(song) {
					console.log(this);
					// 这个方法里面的this指向的是btn按钮，因为它调用了这个函数
					console.log(this.name + '唱了' + song);
					//that1里面存储的是constructor里面的this
					console.log(that1.name);
				}
				say(lan) {
					// 这个方法里面的this指向的是实例对象star1，因为它调用了这个函数
					that2 = this;
					console.log(this);
				}
			}
			var star1 = new Star('Andy', 18);
			star1.sing('第一首歌');
			star1.say();
			console.log(that1 === star1); //true
			console.log(that2 === star1); //true
			
			// 类的继承
			class Father {
				constructor(x, y) {
					this.x = x;
					this.y = y;
				}
				sum() {
					console.log(this.x + this.y); //30
				}
				money() {
					console.log(this.x / this.y); //2
				}
			}
			class Son extends Father {
				constructor(x, y) {
					super(x, y); //关键词super调用父类函数,super必须在this之前调用
					this.x = x;
					this.y = y;
				}
				sum() {
					//如果父类和子类有共同的方法，则为就近原则
					console.log(this.x - this.y); //10
					//但是可以使用super调用父类中的方法
					super.sum();

				}
			}
			var son1 = new Son(20, 10);
			son1.money();
			son1.sum();
		</script>
	</body>
</html>
